import React from 'react';
import classNames from 'classnames';
import styles from './BaseMap.less';
import {Motion, spring} from 'react-motion';
import {updateState} from '../../../models/global';
import { connect } from 'dva';
import { contain } from '../../../utils/util';
import _LightStyle from '../../../map/light';
import _DarkStyle from '../../../map/dark';

const DarkStyle = _DarkStyle.layers;
const LightStyle = _LightStyle.layers;

class BasemapPicker extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
        };
    }

    handleMouseOver = () => {
        this.setState({open: true});
    };

    handleMouseOut = () => {
        this.setState({open: false});
    };

    // 移除矢量图层
    removeVectorBasemap = () => {
        const {map} = this.props;
        if(!map) return;
        const layers = map.getStyle().layers;
        if(layers) {
            layers.forEach(layer => {
                if(layer.id.indexOf("atlas") < 0) {
                    map.removeLayer(layer.id);
                }
                const layerName = layer.metadata && layer.metadata.name;
				if(layerName && contain(["buildings", "houses", "roads", "街道", "区县", "南京市"], layerName) < 0) {
					map.setLayoutProperty(layer.id, "visibility", "none");
				}
            });
        }

    }

    handleBasemap= (type) => {
        const {map, activeBasemap} = this.props;
        if(!map || type === activeBasemap) return;
        let basemapBeforeId = null;
        if(type !== "satllite") {
            this.removeVectorBasemap();
            this.toggleSatllite("none");
            map.getStyle().layers.forEach((layer) => {
                if(layer && layer.metadata && layer.metadata.name === "南京市") {
                    basemapBeforeId = layer.id;
                    return;
                }
            });
        }
        if(type === 'basic') {
            LightStyle.forEach(layer => {
                map.addLayer(layer, basemapBeforeId);
            });
        }
        if(type === 'dark') {
            DarkStyle.forEach(layer => {
                map.addLayer(layer, basemapBeforeId);
            });
        }
        if(type === 'satllite') {
            this.removeVectorBasemap();
            this.toggleSatllite("visible");
        }
		if(type === 'tdt_img') {
		    this.removeVectorBasemap();
		    this.toggleTdtImg("visible");
		}
		if(type === 'gd_sg') {
		    this.removeVectorBasemap();
		    this.toggleGdSg("visible");
		}
        updateState({activeBasemap: type});
        this.handleMouseOut();
    };

    toggleSatllite = (visible) => {
        const {map} = this.props;
        if(!map) return;
        const layers = map.getStyle().layers;
        layers.forEach((layer) => {
            if(layer.metadata && layer.metadata.name === "谷歌影像") {
                map.setLayoutProperty(layer.id, "visibility", visible);
            }
            if(layer.metadata && layer.metadata.name === "天地图影像标注") {
                map.setLayoutProperty(layer.id, "visibility", visible);
            }
        });
    }
	
	toggleTdtImg = (visible) => {
	    const {map} = this.props;
	    if(!map) return;
	    const layers = map.getStyle().layers;
	    layers.forEach((layer) => {
			if(layer.metadata && layer.metadata.name === "天地图影像") {
			    map.setLayoutProperty(layer.id, "visibility", visible);
			}
	    });
	}
	
	toggleGdSg = (visible) => {
	    const {map} = this.props;
	    if(!map) return;
	    const layers = map.getStyle().layers;
	    layers.forEach((layer) => {
			if(layer.metadata && layer.metadata.name === "谷歌栅格地图") {
			    map.setLayoutProperty(layer.id, "visibility", visible);
			}
	    });
	}

    render() {
        const start = 40;
        const {basemaps, activeBasemap } = this.props;
        return (
            <div className={styles.basemapPicker}>
                    <Motion style={{y: spring(this.state.open ? start : 0)}}>
                        {({y}) =>  {
                            return (
                            <ul onMouseOver = {this.handleMouseOver} onMouseOut = {this.handleMouseOut}>
                              {basemaps.map((basemap, index) => {
                                    return <li key={index} style={{
                                        WebkitTransform: `translate3d(0, ${y * index}px,  0)`,
                                        transform: `translate3d(0, ${y * index}px, 0)`,
                                      }} 
                                      className={classNames(styles.layer2, activeBasemap === basemap.type && styles.active)} 
                                      title = {`切换到${basemap.name}`}
                                      onClick={() => {this.handleBasemap(basemap.type, index)}}>
                                        <img src={`./images/basemap/${basemap.type}.jpg`} />
                                      </li>
                                })}
                            </ul>
                            );
                        }}
                    </Motion>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        map: state.map.map,
        basemaps: state.map.basemaps,
        activeBasemap: state.map.activeBasemap,
    };
}

export default connect(mapStateToProps)(BasemapPicker);